<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生界面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(
            function (){
                $("#tableApply").hide()

                var student
                var apply = null

                function updateStudent(){
                    student=localStorage.getItem("student")
                    student=JSON.parse(student)
                    $("#studentName").val(student.studentName)
                    $("#sex").val(student.sex)
                    $("#depart").val(student.departName)
                    $("#grade").val(student.grade)
                    $("#address").val(student.address)
                    $("#className").val(student.className)
                    $("#departName").val(student.departName)
                }

                //获取对应年级教师
                function getTeacher(){
                    $.ajax({
                        url:"/teacher/getByGrade",
                        type:"post",
                        data: JSON.stringify({
                            "departId": student.departId,
                            "grade": student.grade
                        }),
                        contentType:"application/json",
                        dataType:"json",
                        success: function(data) {
                            let r = data;
                            if (r.code === 1) {
                                teachers = r.data
                                $("#teacherName").html("")
                                for(i=0; i<teachers.length; i++){
                                    $("#teacherName").append("<option value="+teachers[i].id+">"+
                                        teachers[i].name+"</option>")
                                }
                                if(apply != null){
                                    $("#teacherName").val(apply.teacherId)
                                }
                            } else {
                                alert(r.msg)
                            }
                        }
                    })
                }

                function submitApply() {
                    $.ajax({
                        url:"/apply/submit",
                        type:"post",
                        data: JSON.stringify({
                            "outTime": $("#outTime").val(),
                            "backTime": $("#backTime").val(),
                            "place": $("#place").val(),
                            "tip": $("#tip").val(),
                            "studentId": student.studentId,
                            "studentName": student.studentName,
                            "teacherId": $("#teacherName option:selected").val(),
                            "teacherName": $("#teacherName option:selected").text(),
                            "departId": student.departId,
                            "departName": student.departName
                        }),
                        contentType:"application/json",
                        dataType:"json",
                        success: function(data) {
                            let r = data;
                            if (r.code === 1) {
                                apply = r.data
                                updateBtn()
                                alert("提交成功")
                                $("#teacherName").attr("disabled", "disabled")
                            } else {
                                alert(r.msg)
                            }
                        }
                    })
                }

                function updateBtn(){
                    if(apply!=null){
                        $("#btnApply").text("撤销申请")
                        $("#teacherName").attr("disabled", "disabled")
                    }
                    else{
                        $("#btnApply").text("提交申请")
                        $("#teacherName").removeAttr("disabled")
                    }
                }

                function getApply(){
                    $.ajax({
                        url:"/apply/get",
                        type:"post",
                        data: JSON.stringify({
                            "studentId": student.studentId
                        }),
                        contentType:"application/json",
                        dataType:"json",
                        success: function(data) {
                            let r = data;
                            if (r.code === 1) {
                                apply = r.data
                                if(apply != null){
                                    $("#outTime").val(apply.outTime)
                                    $("#backTime").val(apply.backTime)
                                    $("#place").val(apply.place)
                                    $("#tip").val(apply.tip)
                                    $("#stat").val(apply.stat)
                                    $("#departName").val(apply.departName)
                                    if(apply.stat == 1){
                                        $("#stat").text("审批通过")
                                        $("#stat").css('color', '#15f16d')
                                        $("#recom").text("已通过")
                                    }
                                    else if(apply.stat == 0){
                                        $("#stat").text("辅导员未审批")
                                        $("#stat").css('color', '#3823d7')
                                    }
                                    else if(apply.stat == 2){
                                        $("#stat").text("辅导员审批不通过")
                                        $("#stat").css('color', '#d31a1a')
                                        $("#recom").text(apply.recom)
                                    }
                                    else if(apply.stat == 3){
                                        $("#stat").text("已返校")
                                        $("#stat").css('color', '#15f16d')
                                    }
                                    else if(apply.stat == 4){
                                        $("#stat").text("院级审批不通过")
                                        $("#stat").css('color', '#d31a1a')
                                        $("#recom").text(apply.recom)
                                    }
                                    else if(apply.stat == 5){
                                        $("#stat").text("院级未审批")
                                        $("#stat").css('color', '#3823d7')
                                    }
                                }
                                getTeacher()
                                updateBtn()
                            } else {
                                alert(r.msg)
                            }
                        }
                    })
                }

                function repealApply(){
                    $.ajax({
                        url:"/apply/repeal",
                        type:"post",
                        data: JSON.stringify({
                            "applyId": apply.applyId
                        }),
                        contentType:"application/json",
                        dataType:"json",
                        success: function(data) {
                            let r = data;
                            if (r.code === 1) {
                                alert(r.data)
                            } else {
                                alert(r.msg)
                            }
                        }
                    })
                    apply = null
                    updateBtn()
                }

                updateStudent();

                $("#btnApply").click(
                    function (){
                        if(apply != null){
                            repealApply()
                            $("#teacherName").removeAttr("disabled")
                        }
                        else {
                            if($("#outTime").val() == "" || $("#backTime").val() == ""){
                                alert("请选择时间")
                                return
                            }
                            else if($("#outTime").val() >= $("#backTime").val()){
                                alert("外出时间不能早于返校时间")
                                return
                            }
                            submitApply()
                        }
                    }
                )

                $("#btnShowApply").click(
                    //展示外出申请
                    function (){
                        getApply();
                        $("#tableApply").show()
                    }
                )

                //修改学生信息
                $("#btnUpdate").click(
                    function (){
                        $.ajax({
                            url:"/student/update",
                            type:"put",
                            data: JSON.stringify({
                                "studentId": student.studentId,
                                "studentName": $("#studentName").val(),
                                "sex": $("#sex").val(),
                                "address": $("#address").val(),
                                "className": $("#className").val(),
                            }),
                            contentType:"application/json",
                            dataType:"json",
                            success: function(data) {
                                let r = data;
                                if (r.code === 1) {
                                    let stu = JSON.stringify(r.data)
                                    localStorage.setItem("student", stu)
                                    alert("信息修改成功")
                                    updateStudent();
                                } else {
                                    alert(r.msg)
                                }
                            }
                        })
                    }
                );

                $("#btnGetJpg").click(
                    function (){
                        if(apply == null){
                            alert("无申请")
                            return
                        }

                        $.ajax({
                            url:"/apply/getImg",
                            type:"post",
                            data: JSON.stringify({
                                "applyId": apply.applyId
                            }),
                            contentType:"application/json",
                            dataType:"json",
                            success: function(data) {
                                let r = data;
                                if (r.code === 1) {
                                    let img = r.data
                                    $("#png").attr("src", "data:image/png;base64,"+img)
                                    $("#png").show()
                                } else {
                                    alert(r.msg)
                                }
                            }
                        })
                    }
                );

                $("#btnBack").click(
                    function (){
                        if(apply == null){
                            alert("无申请")
                            return
                        }
                        else if(apply.stat != 1){
                            alert("审批未通过")
                            return
                        }

                        $.ajax({
                            url:"/apply/backSchool",
                            type:"post",
                            data: JSON.stringify({
                                "applyId": apply.applyId
                            }),
                            contentType:"application/json",
                            dataType:"json",
                            success: function(data) {
                                let r = data;
                                if (r.code === 1) {
                                    alert(r.data)
                                } else {
                                    alert(r.msg)
                                }
                            }
                        })
                    }
                );

                $("#btnShowNotice").click(
                    function (){
                        window.location.href = "showNotice.html";
                    }
                )
            }
        )
    </script>
    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            display: flex;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
            background: gray;
        }

        .inform{
            margin-top: 5%;
            position: relative;
            width: 100%;
            height: 100%;
            background: lightblue;
            border-radius: 10px;
            overflow: hidden;
        }

        .inform table{
            inset: 2px;
            background: lightseagreen;
            padding: 30px 30px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
        }

        button{
            border: none;
            outline: none;
            background: slategrey;
            cursor: pointer;
            border-radius: 4px;
            font-weight: 600;
            width: 100px;
            margin-bottom: 2px;
            margin-left: 5px;
        }

        input{
            width: 150px;
            color: black;
            font-size: 1em;
            letter-spacing: 0.05em;
            margin-bottom: 2px;
            margin-left: 5px;
            border-radius: 4px;
            background-color: cadetblue;
        }

        select{
            width: 90px;
            color: black;
            font-size: 1em;
            letter-spacing: 0.05em;
            margin-bottom: 2px;
            margin-left: 5px;
        }

        label{
            width: 80%;
            color: black;
            font-size: 1em;
            letter-spacing: 0.05em;
            margin-bottom: 2px;
            margin-left: 5px;
            background-color: azure;
        }

        .applyBox{
            position: relative;
            width: 100%;
            height: 500px;
            background: lightblue;
            border-radius: 8px;
            overflow: hidden;
        }
        
        th{
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 8px;
            border: 2px solid #3251c0;
            height: 30px;
        }

        td{
            height: 30px;
        }

        .applyBox table{
            inset: 2px;
            padding: 30px 30px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
        }

        #png{
            width: 600px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="inform">
            <table>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>学院</th>
                    <th>年级</th>
                    <th>地址</th>
                    <th>班级</th>
                    <th>操作</th>
                    <th>外出</th>
                    <th>通知</th>
                </tr>
                <tr>
                    <td>
                        <input id="studentName" type="text">
                    </td>
                    <td>
                        <input id="sex" type="text">
                    </td>
                    <td>
                        <input id="depart" type="text" disabled>
                    </td>
                    <td>
                        <input id="grade" type="text" disabled>
                    </td>
                    <td>
                        <input id="address" type="text">
                    </td>
                    <td>
                        <input id="className" type="text">
                    </td>
                    <td>
                        <button id="btnUpdate">修改</button>
                    </td>
                    <td>
                        <button id="btnShowApply">查看申请</button>
                    </td>
                    <td>
                        <button id="btnShowNotice">查看通知</button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="applyBox">
            <table id="tableApply">
                <tr>
                    <th>操作</th>
                    <td>
                        <button id="btnApply"></button>
                    </td>
                </tr>
                <tr>
                    <th>外出时间</th>
                    <td>
                        <input id="outTime" type="datetime-local">
                    </td>
                </tr>
                <tr>
                    <th>返校时间</th>
                    <td>
                        <input id="backTime" type="datetime-local">
                    </td>
                </tr>
                <tr>
                    <th>外出地点</th>
                    <td>
                        <input id="place" type="text">
                    </td>
                </tr>
                <tr>
                    <th>备注</th>
                    <td>
                        <input id="tip" type="text">
                    </td>
                </tr>
                <tr>
                    <th>学院</th>
                    <td>
                        <input id="departName" type="text" disabled>
                    </td>
                </tr>
                <tr>
                    <th>辅导员姓名</th>
                    <td>
                        <select id="teacherName">

                        </select>
                    </td>
                </tr>
                <tr>
                    <th>是否审批通过</th>
                    <td>
                        <label id="stat"></label>
                    </td>
                </tr>
                <tr>
                    <th>审批意见</th>
                    <td>
                        <label id="recom"></label>
                    </td>
                </tr>
                <tr>
                    <th>操作</th>
                    <td>
                        <button id="btnGetJpg">获取假条</button>
                        <button id="btnBack">返校</button>
                    </td>
                </tr>
            </table>
        </div>
        <img id="png" hidden>
    </div>
</body>
</html>